import { createRouter, createWebHashHistory } from "vue-router";
import NProgress from "@/config/nprogress";
import { RouteRecordRaw } from "vue-router";
import { useMenuStore } from "@/stores/modules/menu";

const LOGIN_URL = "/login";
const Layout = () => import("@/views/layout/index.vue");
/**
 * @description 定义公共路由
 */
const staticRoutes: RouteRecordRaw[] = [
  {
    path: LOGIN_URL,
    component: () => import('@/views/login/index.vue'),
  }, {
    path: '/404',
    component: () => import('@/components/ErrorMessage/404.vue'),
  }, {
    path: '',
    component: Layout,
    redirect: '/home',
    children: [{
      name: '首页',
      path: 'home',
      component: () => import('@/views/home/index.vue'),
      "meta": {
        "icon": "HomeFilled",
        "title": "首页",
        "isLink": "",
        "isHide": false,
        "isFull": false,
        "isAffix": true,
        "isKeepAlive": true
      }
    }]
  }
]
/**
 * @description 定义menu路由
 */
const asyncRouters: RouteRecordRaw[] = [
  {
    "path": "/auth",
    "name": "auth",
    component: Layout,
    "redirect": "/auth/menu",
    "meta": {
      "icon": "Lock",
      "title": "运营中心",
      "isLink": "",
      "isHide": false,
      "isFull": false,
      "isAffix": false,
      "isKeepAlive": true
    },
    "children": [
      {
        "path": "/auth/menu",
        "name": "authMenu",
        "component": () => import('@/views/home/index.vue'),
        "meta": {
          "icon": "Menu",
          "title": "菜单权限",
          "isLink": "",
          "isHide": false,
          "isFull": false,
          "isAffix": false,
          "isKeepAlive": true
        }
      },
      {
        "path": "/auth/button",
        "name": "authButton",
        "component": () => import('@/views/home/index.vue'),
        "meta": {
          "icon": "Menu",
          "title": "按钮权限",
          "isLink": "",
          "isHide": false,
          "isFull": false,
          "isAffix": false,
          "isKeepAlive": true
        }
      }
    ]
  },
]

/**
 * @description 初始化动态路由
 */
export const initDynamicRouter = async () => {
  // const userStore = useUserStore();

  try {
    // 1.获取菜单列表 && 按钮权限列表
    // await authStore.getAuthMenuList();
    // await authStore.getAuthButtonList();

  } catch (error) {
    // 当按钮 || 菜单请求出错时，重定向到登陆页
    // userStore.setToken("");
    router.replace(LOGIN_URL);
    return Promise.reject(error);
  }
};


const router = createRouter({
  history: createWebHashHistory(),
  routes: [...staticRoutes, ...asyncRouters],
  scrollBehavior: () => ({ left: 0, top: 0 })
});


/**
 * @description 路由拦截 beforeEach
 * */
router.beforeEach(async (to, from, next) => {
  NProgress.start();


  // 1.判断是否有token

  // 2.路由纳入store
  const menuStore = useMenuStore();
  if (!menuStore.menuListGet.length) {
    menuStore.setMenuList(asyncRouters);
  }

  // 7.存储 routerName 做按钮权限筛选
  menuStore.setRouteName(to.name as string);

  next();
});


/**
 * @description 路由跳转错误
 * */
router.onError(error => {
  NProgress.done();
  console.warn("路由错误", error.message);
});

/**
 * @description 路由跳转结束
 * */
router.afterEach(() => {
  NProgress.done();
});

export default router;
